<template>
    <h3>添加题目:</h3>
    <div class="topic-form">
        <!-- 考试分类 -->
        <el-form-item label="考试分类:">
            <el-select v-model="form.id" placeholder="选择考试分类" style="width: 240px">
                <el-option v-for="item in form.category" :key="item.id" :label="item.text" :value="item.id"
                    @click="category" />
            </el-select>
        </el-form-item>
        <!-- 试卷名称 -->
        <el-form-item label="试卷名称:">
            <el-select v-model="form.eid" placeholder="选择一套试卷" style="width: 240px">
                <el-option v-for="item in form.examList" :key="item.eid" :label="item.name" :value="item.eid"
                    @click="testPaper" />
            </el-select>
        </el-form-item>
        <!-- 题目 -->
        <el-form-item label="题目:">
            <el-input v-model="form.question" type="textarea" placeholder="输入题目" />
        </el-form-item>
        <!-- 分值 -->
        <el-form-item label="分值:">
            <el-input-number v-model="form.score" :min="1" :max="100" @change="" />
        </el-form-item>
        <!-- 答案 -->
        <el-form-item label="正确答案:">
            <el-select v-model="form.answer" placeholder="题目的正确答案" style="width: 240px">
                <el-option v-for="item in answerlist" :key="item" :label="item" :value="item"
                    @click="changeAnswer" />
            </el-select>
        </el-form-item>
        <!-- 选项 -->
            <el-form-item label="答案A:">
                <el-input v-model="A.answer" type="textarea" placeholder="输入题目" />
            </el-form-item>
            <el-form-item label="答案B:">
                <el-input v-model="B.answer" type="textarea" placeholder="输入题目" />
            </el-form-item>
            <el-form-item label="答案C:">
                <el-input v-model="C.answer" type="textarea" placeholder="输入题目" />
            </el-form-item>
            <el-form-item label="答案D:">
                <el-input v-model="D.answer" type="textarea" placeholder="输入题目" />
            </el-form-item>
            <el-button type="primary" size="large" @click="addTopic">添加</el-button>
    </div>
</template>
<style lang="scss" scoped></style>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { category_list, test } from '../../api/request'
import api from '../../api/http'
import { ElMessage, ElMessageBox, ElDrawer } from 'element-plus'

// 添加事件时的表单采集表单数据
const form = reactive({
    category: [//考试分类可以从这里拿
        { id: 0, text: '' },
    ],
    examList: [//试卷列表可以从这里拿
        { eid: 0, name: '' }
    ],
    id: '',
    eid: '',
    name: '',//试卷名
    question: '',//题目
    answer: '',//答案
    score: 1,//分值
})

const answerlist=reactive( ['A', 'B', 'C', 'D'])//答案选项
const A:any = reactive({key:'A',answer:''})//A选项
const B = reactive({key:'B',answer:''})//B选项
const C = reactive({key:'C',answer:''})//C选项
const D = reactive({key:'D',answer:''})//D选项
// 答案选项
let optionList:any = [A, B, C, D];

// 添加题目
const addTopic=()=>{
    let {eid,question,answer,score}=form;
    // var jsonStr = 
    let option = JSON.stringify(optionList);
    // 确保表单不缺少参数
    if(eid&&question&&answer&&score&&option){
        let name = form.examList.filter(item => String(item.eid )== eid)[0].name;
        // 网络请求
        api.topic_add({eid,name,question,answer,score,option})
        .then(res=>{
            if(res.code==200){
                ElMessage(res.msg)
            }
            // 总分超出提示
            else if(res.code==201){
                if(res.over_score==0){
                    ElMessage("总分已满")
                }
                else{
                    ElMessage("总分超出"+res.over_score+"分,请重新填写分值(不超过"+(score-res.over_score)+"分)")
                }
            }
            // 其他错误提示,试卷已存在之类的
            else{
                ElMessage(res.msg)
                console.log(res);
                
            }
        })
    }
    else{
        ElMessage("请填写完整信息")
    }
    
}


// 获取考试分类列表
const getCategoryFn = () => {
    category_list().then(content => {
        if (content.code == 200) {
            // 放入下拉框
            form.category = content.result;
        }
    })
}
getCategoryFn();

// 选择考试分类
const category = () => {
    exam_list_by_category(Number(form.id))
}
// 选择试卷
const testPaper = () => {
    // console.log(form.examList);
    // console.log(form.eid);
}
// 选择答案
const changeAnswer = () => {
    // console.log(form.answer);
}

//试卷列表
// const examList:any = reactive([])
// 根据分类获取试卷列表
function exam_list_by_category(category_id: number) {
    api.exam_list_all()
        .then(res => {
            form.examList = res.result.filter((item: { id: number }) => item.id == category_id)
        })
}


</script>
